<template>
  <t-layout>
    <t-header>
      <t-head-menu>
        <template #logo>
          <t-icon name="shop" size="28px" />
          <span class="title">Windsurf Admin</span>
        </template>
      </t-head-menu>
    </t-header>
    <t-layout>
      <t-aside>
        <t-menu theme="light" :value="currentRoute" @change="handleMenuChange">
          <t-menu-item value="dashboard">
            <template #icon>
              <t-icon name="dashboard" />
            </template>
            仪表盘
          </t-menu-item>
          <t-menu-item value="user-management">
            <template #icon>
              <t-icon name="user" />
            </template>
            用户管理
          </t-menu-item>
        </t-menu>
      </t-aside>
      <t-layout>
        <t-content>
          <router-view />
        </t-content>
        <t-footer>Copyright @ 2024 Windsurf Project. All Rights Reserved</t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 计算当前路由对应的菜单项
const currentRoute = computed(() => route.name as string)

// 处理菜单点击
const handleMenuChange = (value: string) => {
  if (value === 'dashboard') {
    router.push('/')
  } else if (value === 'user-management') {
    router.push('/users')
  }
}
</script>

<style>
.title {
  font-size: 20px;
  font-weight: 600;
  margin-left: 8px;
}

.t-layout__sider {
  min-height: calc(100vh - 64px);
}

.t-layout__content {
  padding: 16px;
}

.t-layout__footer {
  text-align: center;
  padding: 16px;
  color: rgba(0, 0, 0, 0.6);
}
</style>
